.custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: red; 
    padding: 10px 20px;
    color:yellow;
  }
  
  .logo-container {
    display: flex; /* 确保 logo 和名称可以一起对齐 */
    align-items: center;
  }
  
  .logo {
    display: flex;
    align-items: center;
  }
  
  .icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  
  .site-name {
    font-size: 24px;
    font-weight: bold;
  }
  
  .custom-nav {
    display: flex;
    justify-content: center;
    flex: 1;
  }
  
  .nav-item {
    margin: 0 30px; /* 增大导航项间距 */
    text-decoration: none; /* 去掉默认下划线 */
    font-size: 20px; /* 字体大小 */
    color: white; /* 初始字体颜色 */
    position: relative; /* 用于下面的横线 */
    transition: color 0.3s, background-color 0.3s; /* 动画过渡 */
  }
  
  .nav-item:hover {
    color: yellow; /* 悬停时颜色 */
    background-color: rgba(255, 255, 0, 0.1); /* 悬停时背景颜色变浅 */
  }
  
  .nav-item.active {
    color: yellow; /* 选中时颜色 */
  }
  
  /* 选中状态下的横线，调整位置 */
  .nav-item.active::after {
    content: '';
    display: block;
    height: 3px; /* 横线高度 */
    background-color: yellow; /* 横线的颜色 */
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px; /* 横线距离文本的距离 */
  }
  
  .avatar-container {
    display: flex;
    align-items: center; /* 确保头像与下拉菜单垂直对齐 */
    padding-right: 20px;
  }
  
  .avatar-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }